<script setup lang="ts">
import { ref } from 'vue'

</script>

<template>
  <!-- 1.里面有一个根标签 -->
  <div class="container">
  <!-- <main class="box">
      <van-button>hhhh</van-button>
    </main> -->
    <!-- 一级路由出口 命名视图  插槽-->
    <!-- <router-view/> -->
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
 
</router-view>

     <router-view name="FooterCom"></router-view>

    <!-- <footer class="footer"> -->
      <!-- 这里没有用router-link跳转 用标签的to属性跳转也可以 -->
  <!-- <van-tabbar v-model="active" active-color="#ee0a24">
  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/order" icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
    </footer> -->

    <div class="tip">
    <p>请切换为竖屏，横屏影响您的用户体验！</p>
    <!-- <p></p>  -->
   </div>
  </div>
</template>

<style lang="scss">
/* 公共样式设置 要自适应  先设置高*/
html,
body,
#app,
.container {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

// 设置根标签的字体大小
 // 100vw 屏幕的宽度 100%
  /*
    目前百分之90以上的 UI 设计师会使用 iPhone6,7,8 的屏幕尺寸进行设计搞的设计
    如果设备是 iPhone6,7,8 为基础的设计图，那么我们应该通过 100 / 375 * 100 = 26.66666666vw
    如果设备是 iPhone 12Pro 为基础的设计图，那么我们应该通过 100 / 390 * 100 = 25.641vw
    如果设备是 iPhone 4 为基础的设计图，那么我们应该通过 100 / 320 * 100 = 31.25vw
  */
html {
  // 具体值要根据公司设计图来决定这里应该写多少，这里的值是设计图中出现次数最多的字号
  font-size: 26.666666666vm;
}
//body的字体默认大小
body {
  font-size: 12px 
  //0.12rem;  //都设置成rem单位  这样可以根据屏幕大小自适应 1rem = 100px
  //如果设置的化字体会自动变小  先改回12px
}

.container {
  display: flex;
  flex-direction: column;
  
}

.box{
  flex:1;
  background-color: lightcoral;
}

// .footer{
//   height: 0.5rem;
//   background-color: aquamarine;
// }

// 定义一个fade过渡效果
//从哪里
.fade-enter-active {
  transition: all 0.5s;  //过渡时间
  opacity: 0; //透明度
  // transform: translateX(100%);  //出框 最右面
}

//移动到哪里 过渡效果
.fade-enter-to {
  // transition: 0.4s;
  opacity: 1;
  // transform: translateX(0);  //移入到最右面
}

.tip{
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  user-select: none;
  font-size: 50px;
  // line-height: 2rem;   //这个属性不起作用 反而有问题
  color: rgb(26, 179, 51);
  // display: flex;
  
}

@media (orientation: landscape) {
   .tip{
    display: flex;
    // 字调整到中间显示
    justify-content: center;
    align-items: center;
   }
}

</style>
